<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="70%" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-main>
            <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right">
                <el-row :gutter="1">
                    <el-col :span="12">
                        <el-form-item label="巡检方案编码" prop="code">
                            <el-input v-model="form.code" clearable placeholder="巡检方案编码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="巡检方案名称" prop="title">
                            <el-input v-model="form.title" clearable placeholder="巡检方案名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="1">
                    <el-col :span="12">
                        <el-form-item label="巡检类型" prop="check_class_id">
                            <el-select v-model="form.check_class_id"  filterable style="width: 100%" placeholder="请选择巡检类型" clearable @change="typeChange">
                                <el-option v-for="item in checktList" :key="item.id" :label="item.title" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="巡检人员" prop="other_id">
                            <el-select v-model="form.other_id"  filterable style="width: 100%" placeholder="请选择巡检人员" clearable>
                                <el-option v-for="item in humList" :key="item.id" :label="item.name" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="1">
                    <el-col :span="12">
                        <el-form-item label="计划类型" prop="plan_id">
                            <el-select v-model="form.plan_id"  filterable style="width: 100%" placeholder="请选择计划类型" clearable @change="typeChange">
                                <el-option v-for="item in planList" :key="item.id" :label="item.title" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="巡检部门" prop="dept_id">
                           <el-select v-model="form.dept_id" placeholder="请选择关联部门" style="width: 100%" filterable>
                                <el-option v-for="item in depList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="1">
                    <el-col :span="12">
                        <el-form-item label="开始时间" prop="start_time">
                            <!-- <el-date-picker v-model="form.start_time" :value-format="'YYYY-MM-DD'" style="width:100%" type="date" placeholder="请选择开始时间" /> -->
                            <el-date-picker v-model="form.start_time" type="datetime" placeholder="请选择开始时间" format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" style="width:100%" value-format="YYYY-MM-DD HH:mm:ss" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束时间" prop="end_time">
                            <!-- <el-date-picker v-model="form.end_time" :value-format="'YYYY-MM-DD'"  style="width:100%" type="date" placeholder="请选择结束时间" /> -->
                            <el-date-picker v-model="form.end_time" type="datetime" placeholder="请选择结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" style="width:100%" value-format="YYYY-MM-DD HH:mm:ss" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" clearable></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-plus" @click="add">选择设备</el-button>
                <sc-form-table ref="table" v-model="form.item" placeholder="暂无数据" hideAdd height="350">
                    <el-table-column prop="code" label="设备编号" align="center"></el-table-column>
                    <el-table-column prop="title" label="设备名称" align="center"></el-table-column>
                    <el-table-column prop="class_title" label="设备类别" align="center"></el-table-column>
                    <el-table-column prop="inspection_title" label="巡检项目" align="center"></el-table-column>
                </sc-form-table>
            </el-form>
        </el-main>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
    <select-check v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable :query="{inspection_dept_id:form.dept_id}"></select-check>
</template>

<script>
import selectCheck from './selectCheck';
export default {
  components: { selectCheck },
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增巡检方案',
				edit: '编辑巡检方案',
				show: '查看'
			},
            dialog: {
				save: false
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
				// id: "",
				code: "",
				title: "",
                remark:"",
                other_id:"",
                plan_id:"",
                plan_type:"",
                start_time:"",
                end_time:"",
                item:[],
                dept_id:"",
			},
            type:"",
            time:"",
            dayType:"",
            //验证规则
			rules: {
				code: [
					{ required: true, message: '请输入点检计划编号' }
				],
                title: [
					{ required: true, message: '请输入点检计划名称' }
				],
                dept_id: [
					{ required: true, message: '请选择巡检部门' }
				],
                plan_id: [
					{ required: true, message: '请选择计划类型' }
				],
                start_time: [
					{ required: true, message: '请选择开始时间' }
				],
                end_time: [
					{ required: true, message: '请选择结束时间' }
				],
            },
            addTemplate:{},
            humList:[],//人员
            planList:[],
            checktList:[],
            mainList:[],//维保项目
            depList:[]
		}
	},
	mounted() {
        this.getHum()
        this.getPlan()
        this.geCheck()
        this.getInfo()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        add() {
            if(this.form.dept_id == ""){
                this.$message.error("请先选择部门")
            }else{
                this.dialog.save = true;
                this.$nextTick(() => {
                    this.$refs.saveDialog.open("add");
                });
            }
		},
		//表单提交方法
		submit() {
            this.form.other_id = `${this.form.other_id}`
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.device.InspectionProject.edit.post(this.form);
					} else {
						res = await this.$API.device.InspectionProject.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				} else {
					return false;
				}
			})
		},
        async setData(data) {
			this.form.id = data.id
            var res = await this.$API.device.InspectionProject.detail.post({id:data.id});
			this.form.code = res.data.code
			this.form.title = res.data.title
			this.form.type = res.data.type
			this.form.other_id = Number(res.data.other_id)
			this.form.plan_id = res.data.plan_id
			this.form.start_time = res.data.start_time
			this.form.end_time = res.data.end_time
			this.form.dept_id = res.data.dept_id
            let a = []
            res.data.item.map(item=>{
                a.push({
                    item_id :item.id,
                    code :item.device_code,
                    inspection_id :item.inspection_id,
                    title :item.device_title,
                    class_title :item.class_title,
                    inspection_title :item.detail_name,
                    device_id:item.device_id
                })
            })
            this.form.item = a
            this.form.remark = res.data.remark
            this.form.check_class_id = res.data.check_class_id
		},
        handleSuccess(data){
            console.log('data :>> ', data);
            let a = []
            data.map((item)=>{
                if(item.inspection_id!=""){
                    a.push({
                        code:item.code,
                        title:item.title,
                        class_title:item.class_title,
                        device_id:item.id,
                        inspection_id:item.inspection_id, 
                        inspection_title:item.inspection_title, 
                    })
                }else{
                    this.$message.error("存在无巡检项目的设备!")
                }
            })
            this.form.item = a
        },
        async getHum(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.humList = res.data
        },
        // 计划
        async getPlan(){
            var res = await this.$API.all.getPlan.get({is_page:0});
            this.planList = res.data;
        },
        typeChange(e){
            this.planList.map(item=>{
                if(e==item.id){
                    this.time = item.num,
                    this.type = item.title
                    this.dayType = item.unit_title
                }
            })
        },
        // 点检巡检类型
        async geCheck(){
            // var res = await this.$API.all.getCheckClass.post({is_page:0,type:0});//点检
            var res = await this.$API.all.getCheckClass.post({is_page:0,type:1});//巡检
            this.checktList = res.data
        },
        async getDept(e){
            var res = await this.$API.all.getDep.get({is_page:0,org_id:e});
            this.depList = res.data;
        },
        async getInfo(){
            var res = await this.$API.admin.user.info.get();
            this.getDept((res.data.user.org_id).toString())
            if(this.mode=='add'){
                this.form.dept_id = res.data.user.dept_id
            }
        },
	}
}
</script>

<style></style>
